<template>
  <div>
    <span v-if="column && column.type == eipZeroCodeControl.number && data"
      >{{ convertNumber(data) }}
    </span>
    <div v-else>
      <div v-if="!data" class="customFormNull"></div>
      <div v-else>{{ data }}</div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "otherField",
  data() {
    return {
      data: undefined,
      column: {
        type: "",
      },
    };
  },
  props: ["value", "record", "disabled"],
  watch: {
    value: {
      handler: function (val, oldVal) {
        if (val != oldVal) {
          this.data = val;
          this.$emit("change", val);
        }
      },
      deep: true,
    },
  },
  computed: {
    ...mapGetters("account", ["zeroCode"]),
  },
  mounted() {
    this.setOptions();
  },
  methods: {
    /**
     * 数量格式化
     */
    convertNumber(data) {
      var options = this.column.options;
      //千分位
      if (this.$utils.isUndefined(data)) {
        data = "";
        this.data = data;
      }
      if (options.percentile && data) {
        data = this.$utils.commafy(Number(data), {
          digits: options.precision,
        });
      }
      var value = options.addonBefore + data + options.addonAfter;
      return value;
    },
    setOptions() {
      var systemZeroCodeData = this.$utils.find(
        this.zeroCode,
        (f) => f.zeroCodeId == this.record.options.zeroCodeId
      );
      if (systemZeroCodeData) {
        var columns = JSON.parse(systemZeroCodeData.columnJson);
        //得到明细
        var column = this.$utils.find(
          columns,
          (f) => f.key == this.record.options.field
        );
        this.column = column;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.customFormNull {
  background: #eaeaea;
  border-radius: 3px;
  height: 6px;
  margin: 18px 0;
  width: 22px;
}
</style>
